import React from 'react'
import propTypes from 'prop-types'
import { Grid, List } from 'antd-mobile';

class AvatarSelect extends React.Component {
    static propTypes = {
        selectAvatar: propTypes.func
    }

    constructor(props) {
        super(props)
        this.state = {
            icon: '',
            text: ''
        }
    }

    render() {
        const avatarList = 'boy,girl,man,woman,bull,chick,crab,hedgehog,hippopotamus,koala,lemur,pig,tiger,whale,zebra'
            .split(',')
            .map((item) => ({   //这里多加一个括号不用return了
                icon: require(`../img/${item}.png`),
                text: item
            }))

        //判断是否有头像
        const gridHeader = this.state.icon
            ? (<div>
                <span>已选择头像</span>
                <img style={{ width: 20 }} src={this.state.icon} />
            </div>)
            : <div>请选择头像</div>


        return (
            <div>
                <List renderHeader={gridHeader}>
                    <Grid
                        data={avatarList}
                        columnNum={5}
                        onClick={el => {
                            this.setState(el)
                            this.props.selectAvatar(el.text)
                        }}
                    />
                </List>
            </div>
        )
    }
}


export default AvatarSelect